<!-- 加工商 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<view class="search-box flex">
			<view class="input-product m-b-40">
				<u-search placeholder="搜索" bgColor="rgb(242 242 242 / 0)" searchIconColor="rgb(242 242 242 / 65%)"
					placeholderColor="rgb(242 242 242 / 85%)" v-model="sideObj.keywords" @search="onSearchChange"
					color="#fff"
					:showAction="false"></u-search>
			</view>
		</view>

		<u-grid ref="tabBarSearch" :border="false" class="tabBarSearch flex">
			<u-grid-item v-for="(baseListItem, baseListIndex) in tabBarSearchList" :key="baseListIndex"
				class="tabBarSearchItem" @click="tabBarSearchItemClick(baseListItem)">
				<view class="title">
					<text>{{ baseListItem.title }}</text>
				</view>
				<view>
					<u-icon :name="baseListItem.name" :size="12" color="rgb(83 83 83 / 50%)"></u-icon>
				</view>
			</u-grid-item>
		</u-grid>

		<!-- 列表数据 -->
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<scroll-view scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
			@refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower, 1000)'
			:style="{ height: `${screenHeight}px`, backgroundColor: '#fff' }">

			<view v-if="listData.length === 0" :style="{ paddingTop: `${screenHeight / 4}px` }">
				<u-empty mode="list" />
				<u-button class="empty-button" type="primary" text="新增" @tap="clickBtn({ key: 'btn1' })"></u-button>
			</view>

			<u-cell v-for="item in listData" :key="item.id" :title="item.name" @click="itemProductClick(item)">
				<view slot="icon" class="list-item-avatar">
					<u-avatar fontSize="18" randomBgColor :text="item.name[item.name.length - 1]"></u-avatar>
				</view>
				<view slot="right-icon" class="list-item-text">
					<text class="label">累次</text>
					<text class="amount" :class="{ 'is-green': item.amountDeb > 0 }">{{ item.amountDebt || 0 }}</text>
				</view>
			</u-cell>
		</scroll-view>




		<!-- 全部弹框 -->
		<u-popup :show="typeShow" mode="bottom" overlayOpacity="0.3" @close="typeShowClose">
			<view class="popup-bottom-view">
				<cx-commodity-type :active="typeActive" @target="typeTarget" />
			</view>
		</u-popup>

		<!-- 排序 -->
		<u-popup :show="accumulationShow" mode="bottom" overlayOpacity="0.3" @close="accumulationShowClose">
			<view class="popup-bottom-view">
				<u-cell v-for="(item, index) in accumulationList" :key="index" :title="item.name"
					@click="targetAccumulation(item, index)">
					<u-icon v-if="accumulationActive === index" slot="right-icon" size="20" color="#409EFF"
						name="checkmark"></u-icon>
				</u-cell>
			</view>
		</u-popup>

		<!-- 筛选弹框 侧边栏 -->
		<u-popup class="sidebar" :show="show" mode="right" overlayOpacity="0.3" @close="close" @open="open">
			<view class="pop-view">
				<view>
					<view class="cl-cell flex flex-sb">
						<view class="flex" style="flex: 1;" @click="toCategory">
							<view class="title">
								类别
							</view>
							<view class="value" v-if="sideObj.catName">
								{{ sideObj.catName }}
							</view>
						</view>
						<view class="icon">
							<u-icon name="close" color="#999" size="20" v-if="sideObj.catName" @click="() => {
								sideObj.catName = null; sideObj.catId = null;
							}"></u-icon>
							<u-icon name="arrow-right" color="#999" v-else></u-icon>
						</view>
					</view>
					<view class="cl-cell flex flex-sb">
						<view class="flex" style="flex: 1;" @click="toShop">
							<view class="title">
								门店
							</view>
							<view class="value" v-if="sideObj.shop">
								<!-- {{ sideObj.shop }} -->
							</view>
						</view>
						<view class="icon">
							<u-icon name="close" color="#999" size="20" v-if="sideObj.shop"
								@click="sideObj.shop = ''"></u-icon>
							<u-icon name="arrow-right" color="#999" v-else></u-icon>
						</view>
					</view>
				</view>
				<view class="fot-btn flex flex-sw p-l-10 p-r-10">
					<u-button text="重置" shape="circle" class="reset m-r-10" @click="onReset"></u-button>
					<u-button text="搜索" shape="circle"
						color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
						@click="onSearch"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
	listPage
} from '@/apis/inventory/converter'
export default {
	name: '',
	data() {
		return {
			config: {
				title: "加工商",
				color: "#ffffff",
				//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				rightButton: [
					{
						key: "btn1",
						icon: "&#xe727;",
						position: "left",
					},
					{
						key: "btn2",
						icon: "&#xe888;",
						position: "left",
					},
				],
			},
			show: false,
			tabBarSearchList: [
				{
					name: 'arrow-down-fill',
					title: '全部',
					key: 'type',
					show: false
				},
				{
					name: 'arrow-down-fill',
					title: '累欠降序',
					key: 'accumulation',
					show: false
				},
			],
			// 全部
			typeShow: false,
			typeActive: 0,
			// 排序
			accumulationShow: false,
			accumulationList: [
				{ name: '累欠升序' },
				{ name: '累欠降序' },
				{ name: '日期升序' },
				{ name: '日期降序' },
				{ name: '名称升序' },
				{ name: '名称降序' }
			],
			accumulationActive: 0,
			// 列表数据
			pageLoading: false,
			triggered: false,
			screenHeight: 0,
			listData: [],
			// 参数

			// 侧边栏选择数据
			sideObj: {
				catId: null,
				catName: null,
				isEnable: true,
				keywords: ''
			},
			pages: {
				current: 1,
				size: 20,
			},
		}
	},
	methods: {
		// 跳转类别
		toCategory() {
			uni.navigateTo({
				url: '/pages/application/pages/cloth/converter/converter-add/components/category'
			})
		},
		// 跳转门店
		toShop() {
			uni.navigateTo({
				url: '/pages/selects/shop/index'
			})
		},
		// 获取列表数据
		getListPage() {
			uni.showLoading({
				title: "加载中"
			})
			let _this = this;
			let billId = {
				data: _this.sideObj,
				page: {
					current: _this.pages.current,
					size: _this.pages.size,
					sort: "",
					order: "desc",
					total: 0,
					orders: [
						{
							column: "create_time",
							asc: false,
						},
					],
				},
			};
			listPage(billId).then(res => {
				if (!res.flag) return
				const records = res.data.records || []
				this.listData.push(...records)
			}).finally(_ => {
				this.triggered = false
				this.pageLoading = false
				uni.hideLoading()
			})
		},
		clickBtn(item) {
			if (item.key === "btn1") {
				this.$Router.push({
					name: "inventoryQuantityConverterAdd"
				})
			}
			if (item.key === "btn2") {
				this.show = true
			}
		},
		// 侧边栏
		close() {
			this.show = false
		},
		open() {

		},
		// 搜索
		onSearchChange() {
			this.pages.current = 1
			this.listData = []
			this.getListPage()
		},
		tabBarSearchItemClick({ key }) {

			const index = this.tabBarSearchList.findIndex(item => item.key === key)
			const checkShow = !this.tabBarSearchList[index].show
			this.tabBarSearchList[index].show = checkShow
			this.tabBarSearchList[index].name = checkShow ? 'arrow-up-fill' : 'arrow-down-fill'

			if (key === 'type') return this.typeShow = true
			if (key === 'accumulation') return this.accumulationShow = true
		},
		// 全部选择
		typeTarget(item, index) {
			this.typeActive = index
			this.typeShow = false
			this.tabBarSearchList[0].show = false
			this.tabBarSearchList[0].name = 'arrow-down-fill'
		},
		// 全部关闭
		typeShowClose() {
			this.typeShow = false
			this.tabBarSearchList[0].show = false
			this.tabBarSearchList[0].name = 'arrow-down-fill'
		},
		// 排序关闭
		accumulationShowClose() {
			this.accumulationShow = false
			this.tabBarSearchList[1].show = false
			this.tabBarSearchList[1].name = 'arrow-down-fill'
		},
		// 排序选择
		targetAccumulation(item, index) {
			this.accumulationActive = index
			this.accumulationShow = false
			this.tabBarSearchList[1].show = false
			this.tabBarSearchList[1].name = 'arrow-down-fill'
		},
		// 下拉刷新
		onRefresherrefresh() {
			this.triggered = true
			this.listData = []
			this.getListPage()
		},
		// 滚动加载
		onScrolltolower() { },
		// 选择当前条数据
		itemProductClick(item) {
			let { type } = this.$Route.query;
			console.log("this.$Route.query",this.$Route.query);
			if (type == 'list' || type == 'list2') {
				uni.$emit('on-converter-data', item, type)
				uni.navigateBack()
			} else {
				this.$Router.push({
					path: "/pages/application/pages/cloth/converter/converter-add/index",
					query: {
						id: item.id
					}
				});
			}

		},
		// 重置
		onReset() {
			this.sideObj = {
				catId: null,
				catName: null,
				isEnable: true,
				keywords: ''
			}
		},
		// 搜索
		onSearch() {
			this.show = false
			this.pages.current = 1
			this.listData = []
			this.getListPage()
		}

	},
	mounted() {
		const height = this.$refs.hxnb.$el.offsetHeight + (this.$refs.tabBarSearch.$el.offsetHeight * 2.5);
		const sysInfo = uni.getSystemInfoSync()
		this.screenHeight = sysInfo.windowHeight - height
		this.getListPage()

		// 监听已选类别
		uni.$on('category', data => {
			this.sideObj.catName = data.name;
			this.sideObj.catId = data.id;
		})
	},
	beforeDestroy() {
		uni.$off('category')
	},
}
</script>

<style lang="scss" scoped>
.search-box {
	padding-top: 30rpx;
	justify-content: center;
	background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
}

.input-product {
	width: 95%;
	border-radius: 50upx;
	height: 70upx;
	line-height: 70upx;
	color: #fff;
	display: flex;
	background: rgba(248, 248, 248, 0.34);
}

.tabBarSearch {
	padding-top: 20upx;
	padding-bottom: 20upx;
	border-bottom: 1upx #dadada solid;
	background-color: #fff;
	justify-content: space-around !important;

	.tabBarSearchItem {
		display: flex;
		flex-direction: row;
		align-items: center;

		.title {
			margin-right: 20upx;
			color: #535353bf;
		}
	}
}

.pop-view {
	padding-top: 88rpx;
}

.list-item-avatar {
	margin-right: 20upx;
}

.list-item-text {
	.label {
		font-size: 30upx;
		color: #dadada;
		margin-right: 20upx;
	}
}

.amount {
	color: red;

	&.is-green {
		color: green;
	}
}

.empty-button {
	margin: auto;
	margin-top: 20rpx;
	width: 80%;
}

.cl-cell {
	height: 80rpx;
	border-bottom: 1rpx solid #efefef;
	padding: 0 20rpx 0 40rpx;

	.title {
		color: #999;
	}

	.value {
		flex: 1;
		overflow: hidden;
		height: 40rpx;
		color: #999;
		padding-left: 20rpx;
	}
}
</style>